<template>
  <div class="tc fs-3 p-1" v-if="props.mode != 'selector'">电影管理</div>

  <!-- 搜索表单 -->
  <NFlex class="p-2">
    <NForm inline>
      <NFormItem>
        <NInput v-model:value="queryInfo.title" placeholder="请输入电影名称"></NInput>
      </NFormItem>

      <NFormItem>
        <NSpace>
          <NButton :loading="loading" type="info" @click="requery">查询</NButton>
          <NButton type="error" @click="reset">重置</NButton>
          <NButton
            v-if="props.mode != 'selector'"
            :loading="loading"
            type="success"
            @click="showAdd"
            >添加</NButton
          >
        </NSpace>
      </NFormItem>
    </NForm>
  </NFlex>

  <!-- 表格部分 -->
  <div>
    <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
  </div>

  <!-- 分页信息 -->
  <div class="page">
    <NFlex justify="center">
      <NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update-page="query"
      ></NPagination>
    </NFlex>
  </div>

  <!-- 添加模态框 -->
  <NModal v-model:show="avisible" preset="dialog" title="添加">
    <div>
      <NForm>
        <NFormItem>
          <NInput v-model:value="addInfo.title" placeholder="请输入电影名称"></NInput>
        </NFormItem>
        <NFormItem>
          <NInput
            v-model:value="addInfo.intro"
            placeholder="请输入电影简介"
            type="textarea"
          ></NInput>
        </NFormItem>
      </NForm>
    </div>
    <template #action>
      <NButton :loading="loading" type="success" @click="add">确定</NButton>
      <NButton type="warning" @click="resetAdd">重置</NButton>
      <NButton type="error" @click="avisible = false">取消</NButton>
    </template>
  </NModal>

  <!-- 修改模态框 -->
  <NModal @after-leave="requery" v-model:show="mvisible" preset="dialog" title="修改电影信息">
    <div>
      <NForm>
        <NFormItem>
          <NInput v-model:value="modifyInfo.title" placeholder="请输入电影名称"></NInput>
        </NFormItem>
        <NFormItem>
          <NInput
            v-model:value="modifyInfo.intro"
            placeholder="请输入电影简介"
            type="textarea"
          ></NInput>
        </NFormItem>
      </NForm>
    </div>
    <template #action>
      <NButton :loading="loading" type="warning" @click="modify">保存</NButton>
      <NButton type="error" @click="mvisible = false">取消</NButton>
    </template>
  </NModal>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import {
  useMessage,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NModal,
  NPagination,
  NFlex,
  NSpace,
  useDialog,
} from 'naive-ui'
import type { DataTableColumn } from 'naive-ui'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import type { TbMovie } from '@/types/crud'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
const message = useMessage()
const dialog = useDialog()
const loading = ref(false)

//#region 查询
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const list = ref([] as Array<TbMovie>)
const queryInfo = ref({ title: '' })

const query = () => {
  loading.value = true
  Api.get(
    `/crud/movie/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data: BaseDataResult<PageVO<TbMovie>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

onMounted(() => {
  if (props.mode === 'selector') {
    columns = selectedColumns
  }
  query()
})

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const reset = () => {
  queryInfo.value = { title: '' }
  requery()
}

// mode选择
const props = defineProps(['mode'])
const emits = defineEmits(['info-selected'])

const infoSelected = (info: TbMovie) => {
  emits('info-selected', info)
}

const selectedColumns: DataTableColumn<TbMovie>[] = [
  {
    title: '电影名称',
    key: 'title',
  },
  {
    title: '选择',
    render: (row) => {
      return h(
        NButton,
        {
          type: 'info',
          size: 'small',
          onClick: () => {
            infoSelected(row)
          },
        },
        '选择',
      )
    },
  },
] as DataTableColumn<TbMovie>[]

let columns: DataTableColumn<TbMovie>[] = [
  {
    title: '编号',
    key: 'mid',
  },
  {
    title: '电影名称',
    key: 'title',
  },
  {
    title: '电影简介',
    key: 'intro',
    render(row) {
      return h('div', { class: 'ncol-13' }, row.intro)
    },
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            type: 'warning',
            size: 'small',
            onClick: () => {
              showModify(row)
            },
          },
          '修改',
        ),
        h(
          NButton,
          {
            type: 'error',
            size: 'small',
            onClick: () => {
              showDelete(row)
            },
          },
          '删除',
        ),
        h(
          NButton,
          {
            type: 'error',
            size: 'small',
            onClick: () => {
              showDeleteMovieAndScheduling(row)
            },
          },
          '下架',
        ),
      ])
    },
  },
] as DataTableColumn<TbMovie>[]

//#endregion

//#region 添加
const addInfo = ref({} as TbMovie)
const avisible = ref(false)
const showAdd = () => {
  resetAdd()
  avisible.value = true
}
const resetAdd = () => {
  addInfo.value = { title: '', intro: '' } as TbMovie
}
const add = () => {
  loading.value = true
  Api.post('/crud/movie', addInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('添加成功')
      resetAdd()
      requery()
      return
    }
    message.error(data.message)
  })
}
//#endregion

//#region 修改
const mvisible = ref(false)
const modifyInfo = ref({} as TbMovie)
const showModify = (row: TbMovie) => {
  modifyInfo.value = Tools.concatJson(row) as TbMovie
  mvisible.value = true
}
const modify = () => {
  loading.value = true
  Api.put('/crud/movie', modifyInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('修改成功')
      mvisible.value = false
      return
    }
    message.error(data.message)
  })
}
//#endregion

//#region 删除
const showDelete = (row: TbMovie) => {
  dialog.error({
    title: '警告',
    content: `确定要删除${row.title}吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      loading.value = true
      Api.delete(`/crud/movie/${row.mid}`, {}, (data: BaseResult) => {
        loading.value = false
        if (data.success) {
          message.success('删除成功')
          requery()
          return
        }
        message.error(data.message)
      })
    },
  })
}
//#endregion

//#region 下架
const showDeleteMovieAndScheduling = (row: TbMovie) => {
  dialog.error({
    title: '警告',
    content: `确定要删除 ${row.title} 及其排片吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      loading.value = true
      Api.delete(`/crud/movie/deleteMovieAndScheduling/${row.mid}`, {}, (data: BaseResult) => {
        loading.value = false
        if (data.success) {
          message.success('删除成功')
          requery()
          return
        }
        message.error(data.message)
      })
    },
  })
}
//#endregion
</script>

<style scoped lang="scss"></style>
